<template>
	<view class="like">
		<view class="tj-list">
			<view class="item" v-for="(item, index) in linkList" :key="index">
				<image :src="item.img" mode="aspectFill"></image>
				<view class="topFixed">喜欢</view>
				<view class="infos">
					<view class="tit">{{ item.title }}</view>
					<view class="desc">{{ item.introduce }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { likeList } from '../../api/api.js'
	
	const linkList = ref([])
	
	onLoad(() => {
		likeList().then(res => {
			linkList.value =  res
			console.log(linkList.value)
		})
	})
</script>

<style lang="scss" scoped>
	.like {
		padding: 20rpx;
		box-sizing: border-box;
		.tj-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.item {
				position: relative;
				width: 48%;
				margin-bottom: 20rpx;
				box-shadow: 1px 2px 3px #e5e5e5;
				border-radius: 20rpx 20rpx 0 0;
				overflow: hidden;
				.topFixed {
					position: absolute;
					top: 0;
					right: 0;
					border-radius: 0 20rpx 0 20rpx;
					background-color: #ff5500;
					color: #fff;
					text-align: center;
					font-size: 22rpx;
					padding: 5rpx 20rpx;
					box-sizing: border-box;
				}
				image {
					width: 100%;
					height: 200rpx;
				}
				.infos {
					padding: 10rpx 15rpx;
					.tit {
						font-size: 28rpx;
						font-weight: 700;
						color: #111;
						margin-bottom: 15rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
					}
					.desc {
						font-size: 26rpx;
						color: #8a8a8a;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
	
</style>
